<template>
    <div class="import-export-container">
        <el-button type="primary" class="import-button" @click="importQuestions">导入题目</el-button>
        <el-button type="primary" class="export-button" @click="exportQuestions">导出题目</el-button>
        <el-upload
            ref="upload"
            class="upload-demo"
            drag
            action="#"
            :auto-upload="false"
            :on-change="handleFileChange"
            :file-list="fileList">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const fileList = ref([]);

const importQuestions = () => {
    const upload = ref('upload');
    upload.value.submit();
};

const exportQuestions = () => {
    console.log('导出题目');
};

const handleFileChange = (file, fileList) => {
    console.log('文件变化:', file, fileList);
};
</script>

<style scoped>
.import-export-container {
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    text-align: center;
}

.import-button,
.export-button {
    margin: 10px;
}

.upload-demo {
    margin-top: 20px;
    border: 2px dashed #d9d9d9;
    border-radius: 6px;
    background-color: #fafafa;
    text-align: center;
    padding: 40px 0;
}
</style>
